<template>
  <view class="team-name-edit">
    <u-navbar back-text=""></u-navbar>
    <view class="title">修改群聊名称</view>
    <view class="tip">修改群聊名称后，将在群内通知其他成员。</view>
    
    <view class="edit">
      <u-avatar src="" mode="square" size="80"></u-avatar>
      <u-input v-model="val" type="text" :border="false"
      :custom-style="{padding:'0 10rpx'}" @input="onInput"/>
    </view>
    
    <u-button class="btn" :type="btnType" @click="submit">完成</u-button>
  </view>
</template>

<script>
  export default {
    data () {
      return {
        val: '',
        btnType: ''
      }
    },
    methods: {
      onInput (value) {
        if(value != '' && value != this.oldName) {
          this.btnType = 'success'
        } else {
          this.btnType = ''
        }
      },
      submit () {
        if (this.btnType == 'success') {
          window.nim.updateTeam({
            teamId: this.teamId,
            name: this.val,
            done: (error, team) => {
              
            }
          });
        }
      }
    },
    onLoad: function (option) {
      this.teamId = option.id;
      this.val = option.name;
      this.oldName = option.name;
    }
  }
</script>

<style>
  .team-name-edit {
    padding: 80rpx 40rpx;
  }
  .title {
    font-size: 20px;
    text-align: center;
  }
  .tip {
    font-size: 18px;
    text-align: center;
  }
  .edit {
    margin-top: 20rpx;
    display: flex;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding: 20rpx;
  }
  .btn {
    width: 400rpx;
    height: 80rpx;
    text-align: center;
    line-height: 80rpx;
    margin: 0 auto;
    margin-top: 300rpx;
    border-radius: 10rpx;
  }
</style>
